---
description: How to inject your own components into an existing web page with Plasmo's Content Scripts UI features.
---

import { Callout } from "nextra-theme-docs"

# Content Scripts UI

Plasmo has first-class support for mounting React, Svelte3, or Vue3 components into the current webpage. This feature is called content scripts UI (CSUI).

An extension can have as many CSUI as needed, with each CSUI targeting a group of webpages or a specific webpage by [exporting the config object](/framework/content-scripts#config). To start injecting UI using React:

1. Create a `content.tsx`
1. Export a default React component
1. Profit 🎉

```tsx filename="content.tsx"
const CustomButton = () => {
  return <button>Custom button</button>
}

export default CustomButton
```

<Callout emoji="👀" title="Note">
  **NOTE**: To have multiple content scripts, create a `contents/` directory and
  have your CSUI entries there.
</Callout>

See [with-content-scripts-ui](https://github.com/PlasmoHQ/examples/tree/main/with-content-scripts-ui) for a full example.

### Config

Content scripts UI are a subset of content scripts. Thus, you can [export a config object](/framework/content-scripts#config) just as you would a regular Plasmo content script.

## How does Plasmo CSUI work?

**TL;DR**: Plasmo creates a [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) and mounts your exported component onto it. This isolation technique prevents the web page's style from affecting your component's styling and vice-versa.

For more details, please see the [Life Cycle of Plasmo CSUI](./content-scripts-ui/life-cycle).
